{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}

  <div class="row">

    <div class="col-md-6">
      <center>
      <h4>FCR Output Capture</h4>

      <!-- <img id="img_fcr_capture" width="100%" src="constellation_demo.png"> -->

      <img id="img_fcr_capture"  class="img-responsive" src="holder.js/820x440">

      <br><br>
      <button id="btn_fcr_capture_show" class="btn btn-success">Show</button>
      &nbsp;&nbsp;&nbsp;&nbsp;

      <button id="btn_fcr_capture_show_auto" class="btn btn-primary">Auto Capture</button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button id="btn_fcr_capture_show_stop" class="btn btn-primary">Stop</button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button id="btn_fcr_empty_cache" class="btn btn-warning">Empty Cache</button>

        </center>
    </div>

    <div class="col-md-6">
      <center>
      <h4>ADC Output Capture</h4>

      <!-- <img id="img_adc_capture" width="100%" src="constellation_demo.png"> -->

      <img id="img_adc_capture" class="img-responsive" src="holder.js/820x440">

      <br><br>
      <button id="btn_adc_capture_show" class="btn btn-success">Show</button>
      &nbsp;&nbsp;&nbsp;&nbsp;

      <button id="btn_adc_capture_show_auto" class="btn btn-primary">Auto Capture</button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button id="btn_adc_capture_show_stop" class="btn btn-primary">Stop</button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button id="btn_adc_empty_cache" class="btn btn-warning">Empty Cache</button>

      </center>
    </div>
  </div>

  <br><br>


{% endblock %} 

{% block js%}
{{ super() }}
<script type="text/javascript">
    var fcr_t; 
    var adc_t;

    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }
    
    function fcr_capture_show()
    {
      // $("#img_fcr_capture").prop('src', 'assets/imgs/upload.gif');
      $("#img_fcr_capture").prop('src', '{{ url_for("static", filename="assets/upload.gif") }}');

      // console.log("btn_fcr_capture_show...");
      // url = "cgi/cgi_constellation.php?opt=btn_fcr_capture_show";
      $.get("api/btn_fcr_capture_show", function(data, status){
        console.log(data);
        // $("#img_fcr_capture").attr('src', data);
        $("#img_fcr_capture").attr('src', '/static/files/'+ data);

      }); 
    }

    function auto_fcr() {
      fcr_capture_show();
      fcr_t = setTimeout(auto_fcr, 15000); //15s
    }

    function adc_capture_show()
    {
      $("#img_adc_capture").prop('src', '{{ url_for("static", filename="assets/upload.gif") }}');
      // console.log("btn_adc_capture_show...");
      // url = "cgi/cgi_constellation.php?opt=btn_adc_capture_show";
      $.get("api/btn_adc_capture_show", function(data, status){
        console.log(data);
        // $("#img_adc_capture").attr('src', data);
        $("#img_adc_capture").attr('src', '/static/files/'+ data);
      }); 
    }

    function auto_adc() {
      adc_capture_show();
      adc_t = setTimeout(auto_adc, 20000); //20s
    }

    $(document).ready(function(){

      $("#btn_fcr_capture_show").click(function(){
        fcr_capture_show();
      });

      $("#btn_fcr_capture_show_auto").click(function(){
        auto_fcr();
      });

      $("#btn_fcr_capture_show_stop").click(function(){
        clearTimeout(fcr_t);
      });

      $("#btn_fcr_empty_cache").click(function(){
        console.log('start empty ...');
        toastr["success"]("Command successfully issued.");
        // url = "cgi/cgi_constellation.php?opt=btn_empty_cache";
        $.get("api/btn_empty_cache", function(data, status){
          console.log(data);
        }); 

      });

      //------------------------------------------------------------------------

      $("#btn_adc_capture_show").click(function(){
        adc_capture_show();
      });

      $("#btn_adc_capture_show_auto").click(function(){
        auto_adc();
      });

      $("#btn_adc_capture_show_stop").click(function(){
        clearTimeout(adc_t);
      });

      $("#btn_adc_empty_cache").click(function(){
        console.log('start empty ...');
        toastr["success"]("Command successfully issued.");
        // url = "cgi/cgi_constellation.php?opt=btn_empty_cache";
        $.get("api/btn_empty_cache", function(data, status){
          console.log(data);
        }); 

      });


    });
</script>
{% endblock %}
